<template>
  <div ref="chartContainer">ksdjfdkljl</div>
</template>

<script>
import * as d3 from 'd3';

export default {
  name: 'FlowChart',
  mounted() {
    this.renderChart();
  },
  methods: {
    renderChart() {
      const width = 800;
      const height = 600;

      const svg = d3.select(this.$refs.chartContainer)
        .append('svg')
        .attr('width', width)
        .attr('height', height);

      // Define nodes and links
      const nodes = [
        { id: 'A', x: 50, y: 50, label: '延期待扣（100笔）' },
        { id: 'B', x: 200, y: 50, label: 'N1逾期（180笔）' },
        { id: 'C', x: 350, y: 50, label: 'N2逾期（60笔）' },
        { id: 'D', x: 500, y: 50, label: 'N3逾期（110笔）' },
        // Add more nodes as needed
      ];

      const links = [
        { source: 'A', target: 'B' },
        { source: 'B', target: 'C' },
        { source: 'C', target: 'D' },
        // Add more links as needed
      ];

      // Create a force layout
      const simulation = d3.forceSimulation(nodes)
        .force('link', d3.forceLink(links).id(d => d.id))
        .force('charge', d3.forceManyBody())
        .force('center', d3.forceCenter(width / 2, height / 2));

      // Draw nodes
      const node = svg.selectAll('.node')
        .data(nodes)
        .enter().append('circle')
        .attr('class', 'node')
        .attr('r', 5)
        .attr('cx', d => d.x)
        .attr('cy', d => d.y)
        .call(drag(simulation));

      // Draw labels
      const label = svg.selectAll('.label')
        .data(nodes)
        .enter().append('text')
        .attr('class', 'label')
        .attr('x', d => d.x)
        .attr('y', d => d.y + 20)
        .text(d => d.label);

      // Draw links
      const link = svg.selectAll('.link')
        .data(links)
        .enter().append('line')
        .attr('class', 'link')
        .attr('x1', d => d.source.x)
        .attr('y1', d => d.source.y)
        .attr('x2', d => d.target.x)
        .attr('y2', d => d.target.y);

      // Update the simulation
      simulation.on('tick', () => {
        node.attr('cx', d => d.x)
          .attr('cy', d => d.y);
        label.attr('x', d => d.x)
          .attr('y', d => d.y + 20);
        link.attr('x1', d => d.source.x)
          .attr('y1', d => d.source.y)
          .attr('x2', d => d.target.x)
          .attr('y2', d => d.target.y);
      });

      // Drag function
      function drag(simulation) {
        return d3.drag()
          .on('start', dragstarted)
          .on('drag', dragged)
          .on('end', dragended);

        function dragstarted(event) {
          if (!event.active) simulation.alphaTarget(0.3).restart();
          event.subject.fx = event.subject.x;
          event.subject.fy = event.subject.y;
        }

        function dragged(event) {
          event.subject.fx = event.x;
          event.subject.fy = event.y;
        }

        function dragended(event) {
          if (!event.active) simulation.alphaTarget(0);
          event.subject.fx = null;
          event.subject.fy = null;
        }
      }
    }
  }
};
</script>

<style scoped>
.node {
  fill: #ccc;
}

.link {
  stroke: #999;
  stroke-opacity: 0.6;
}

.label {
  font-family: sans-serif;
  font-size: 12px;
}
</style>